<template>
	<view class="list">
		<view class="list-item" v-for="(item, index) in (settings)" :key="index" v-if="item.showFlag">
			<view class="list-header">
				<view class="list-item-title">
					<view>{{ item.title }}</view>
					<view v-if="item.subTitle" class="list-item-sub-title">{{ item.subTitle }}</view>
				</view>
			</view>
			<template v-if="item.type === 'checkbox'">
				<u-checkbox-group v-model="item.value" @change="">
					<u-checkbox></u-checkbox>
				</u-checkbox-group>
			</template>
			<template v-else>
				<view class="list-value">
					<template v-if="item.type === 'select'">
						<uni-data-select :localdata="item.ranges" v-model="item.value" :clear="false"/>
					</template>
					<template v-else-if="item.type === 'slider'">
						<u-slider :min="item.min" :max="item.max" :step="item.step" v-model="item.value" showValue/>
					</template>
					<template v-else-if="item.type === 'input'">
						<u-input :type="item.inputType" v-model="item.value" :key="item.renderKey"
						         @input="inputChange($event, index)"
						         border="bottom"/>
					</template>
				</view>
			</template>
		</view>

		<!--		<view class="list-item">
					<view class="list-header">
						<view class="list-item-title">
							<view>历史消息长度压缩阈值</view>
							<view class="list-item-sub-title">当未压缩的历史消息超过该值时，将进行压缩</view>
						</view>
					</view>
					<view class="list-value">
						<input type="number" min="500" max="4000" value="1000">
					</view>
				</view>
				<view class="list-item">
					<view class="list-header">
						<view class="list-item-title">
							<view>历史摘要</view>
							<view class="list-item-sub-title">自动压缩聊天记录并作为上下文发送</view>
						</view>
					</view>
					<u-checkbox-group>
						<u-checkbox activeColor="" label=""></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="list-item">
					<view class="list-header">
						<view class="list-item-title">
							<view>历史摘要 (0 of 0)</view>
							<view class="list-item-sub-title">对话内容过短，无需总结</view>
						</view>
					</view>
					<view class="list-value">
					</view>
				</view>-->
	</view>
</template>

<script>
export default {
	emits: ["updateValue"],
	props: {
		config: {
			type: Object,
			default: () => {
			}
		}
	},
	data() {
		return {
			settings: [
				{
					key: "model", showFlag: false, title: "模型 (model)", type: "select", ranges: uni.$u.chat.modelRange
				},
				{
					key: "temperature", showFlag: false,
					title: "随机性 (temperature)",
					subTitle: "值越大，回复越随机",
					type: "slider",
					min: 0,
					max: 2,
					step: 0.1,
					value: 1
				},
				{
					key: "maxTokens",
					showFlag: false,
					title: "单次回复限制 (max_tokens)",
					subTitle: "单次交互所用的最大 Token 数",
					type: "input",
					inputType: 'number',
					min: 1,
					max: 32000,
					value: 2000,
					renderKey: 0
				},
				{
					key: "presencePenalty",
					showFlag: false,
					title: "话题新鲜度 (presence_penalty)",
					subTitle: "值越大，越有可能扩展到新话题",
					type: "slider",
					min: 0,
					max: 4,
					step: 0.1,
					value: 1
				},
				{
					key: "historyMessageCount",
					showFlag: false,
					title: "附带历史消息数",
					subTitle: "每次请求携带的历史消息数",
					type: "slider",
					min: 0,
					max: 32,
					value: 5
				}
			],
			// 这个有效值为 -2 - 2, 因为不支持负数，所以值差2，要在显示和关闭的时候进行处理
			presencePenaltyDifferenceValue: 2,
		}
	},
	created() {
		for (const key in this.config) {
			for (const setting of this.settings) {
				if (setting.key === key) {
					setting.showFlag = true;
					if (key === "presencePenalty") {
						if (this.config[key] > 2 || this.config[key] < -2) {
							this.config[key] = 2;
						}
						setting.value = this.config[key] + this.presencePenaltyDifferenceValue;
					} else {
						setting.value = this.config[key];
					}
					break;
				}
			}
		}
	},
	methods: {
		inputChange(value, index) {
			const curSetting = this.settings[index];
			if (curSetting.type === "input" && curSetting.inputType === "number") {
				if ((curSetting.min || curSetting.min === 0) && value < curSetting.min) {
					curSetting.value = curSetting.min;
					curSetting.renderKey++;
				}
				if ((curSetting.max || curSetting.max === 0) && value > curSetting.max) {
					curSetting.value = curSetting.max;
					curSetting.renderKey++;
				}
			}
		},
		updateValue() {
			for (const key in this.config) {
				for (const setting of this.settings) {
					if (setting.key === key) {
						if (key === "presencePenalty") {
							this.config[key] = setting.value - this.presencePenaltyDifferenceValue;
						} else {
							this.config[key] = setting.value;
						}
						break;
					}
				}
			}
		}
	}
}
</script>

<style lang="scss">

@import "../css/chat.scss";

.list {
	border: var(--border-in-light);
	border-radius: 10px;
	box-shadow: var(--card-shadow);
	margin-bottom: 20px;
	animation: slide-in ease 0.3s;

	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 40px;
		border-bottom: var(--border-in-light);
		padding: 10px 20px;
		animation: slide-in ease 0.6s;

		.list-header {
			display: flex;
			align-items: center;

			.list-icon {
				margin-right: 10px;
			}

			.list-item-title {
				font-size: 14px;
				font-weight: bolder;
			}

			.list-item-sub-title {
				font-size: 12px;
				font-weight: normal;
			}
		}

		.list-value {
			width: 30%;
			max-width: 150px;
			min-width: 80px;

			input {
				border: var(--border-in-light);
				border-radius: 10px;
				padding: 5px 15px 5px 10px;
				font-size: 12px;
				display: flex;
			}
		}

		&:last-child {
			border: 0;
		}
	}
}

.input-range {
	border: var(--border-in-light);
	border-radius: 10px;
	padding: 5px 15px 5px 10px;
	font-size: 12px;
	display: flex;
}


</style>